<template>
  <view class="rf-category">
    <view class="category-list" @touchmove.stop.prevent="moveHandle">
      <!-- 左侧分类导航 -->
      <scroll-view scroll-y="true" class="left">
        <view
          class="row"
          v-for="(fItem, fIndex) in firstList"
          :key="fItem.id"
          :class="[fIndex === showCategoryIndex ? 'on' : '']"
          @tap="showCategory(fIndex, fItem)"
        >
          <view>
            <view class="block"></view>
            {{ fItem.name }}
          </view>
        </view>
      </scroll-view>
      <!--右侧子导航-->
      <view class="right">
        <view class="tab-bar-list">
          <view
            class="tab-bar-list-item"
            v-for="(item, index) in tabbarLiat"
            :class="[currentIndex === index ? 'active' : '']"
            @tap="handleShopCard(index, item.value)"
            :key="index"
          >
            {{ item.name }}
          </view>
        </view>
        <scroll-view scroll-y="true" class="container">
          <view>
            <view class="category">
              <view class="list" v-if="categoryProductList.length > 0">
                <view
                  class="box"
                  v-for="(sItem, index) in categoryProductList"
                  :key="index"
                >
                  <view class="shop-cart">
                    <image
                      :src="sItem.images[0].path"
                      class="shop-image"
                    ></image>
                    <view class="shop-name">
                      <view class="name"> {{ sItem.title }} </view>
                      <view class="price"> ￥{{ sItem.spec[0].price }} </view>
                    </view>
                  </view>
                  <view class="shop-cart-edit">
                    <view
                      class="btn"
                      @tap="handleEdit(sItem.id)"
                      v-if="sItem.status === 2"
                      >编辑</view
                    >
                    <view
                      class="btn"
                      @tap="handleBtnShop(sItem.id, '1')"
                      v-if="sItem.status === 2"
                      >下架</view
                    >
                    <view
                      class="btn"
                      @tap="handleBtnShop(sItem.id, '2')"
                      v-if="sItem.status === 1"
                      >上架</view
                    >
                    <view
                      class="btn"
                      @tap="handleBtnShop(sItem.id, '3')"
                      v-if="sItem.status === 1"
                      >删除</view
                    >
                  </view>
                </view>
              </view>
              <view class="no-data" v-if="categoryProductList.length === 0">
                <i class="iconfont icon404"></i>
                暂无商品
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="footer-btn">
        <button
          class="add-btn"
          @tap="navTo('/pages/commodity/releasecommodities')"
        >
          发布商品
        </button>
      </view>
    </view>
    <!--加载动画-->
    <rfLoading isFullScreen :active="loading"></rfLoading>
    <!-- 规格-模态层弹窗 -->
    <view class="popup spec show" v-if="specClass === 'shows'" @tap="hideSpec">
      <!-- 遮罩层 -->
      <view class="mask" @tap="hideSpec"> </view>
      <view class="layers">
        <view class="box-wrapper">
          {{
            level === "1"
              ? "确认下架该商品？"
              : level === "2"
              ? "确认上架该商品？"
              : "确认要删除该商品？"
          }}
        </view>
        <view class="btn-wrapper">
          <view class="btn border-right" @tap="conrfim"> 确认 </view>
          <view class="btn" @tap="cancle"> 取消 </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import rfSearchBar from "@/components/rf-search-bar";
import { category, deleteproduct } from "@/api/basic";
import { product_category, product } from "@/api/product";
import rfBadgeVue from "../../components/rf-badge/rf-badge.vue";
export default {
  components: {
    rfSearchBar,
  },
  data() {
    return {
      hotSearchDefault: "请输入关键字", // 搜索默认关键字
      showCategoryIndex: 0, // 一级菜单高亮显示序号
      categoryList: [], // 分类列表
      currentIndex: 0,
      firstList: [],
      status: "",
      twoList: [],
      categoryProductList: [],
      specClass: "none", // 规格弹窗
      productDetail: {}, // 商品详情
      search: {},
      bottom: 90,
      productId: null,
      tabbarLiat: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "出售中",
          value: 2,
        },
        {
          name: "已下架",
          value: 1,
        },
      ],
      loading: true,
      styleCateType: this.$mSettingConfig.styleCateType,
      errorImage: this.$mAssetsPath.errorImage,
      currentCateId: "",
      loadingType: "more",
      page: 1,
      level: "",
    };
  },
  // 每次页面显示 执行该方法
  onShow() {
    this.initData();
  },
  methods: {
    //取消按钮的操作
    cancle() {
      this.hideSpec();
    },
    //上下架商品
    async editCommodities() {
      await this.$http.put(`${product}/${this.currentCateId}`, { status: this.level })
        .then((r) => {
          if (this.level == "1") {
            this.$mHelper.toast("下架成功");
          } else {
            this.$mHelper.toast("上架成功");
          }
          this.getProductList(this.productId);
        })
        .catch(() => {});
    },
    moveHandle() {},
    //上下架商品
    async handleBtnShop(id, status) {
      this.specClass = "shows";
      this.level = status;
      this.currentCateId = id;
    },
    //删除商品
    async deleteproduct() {
      await this.$http
        .delete(`${deleteproduct}/${this.currentCateId}`, {})
        .then(async (res) => {
          this.getProductList(this.productId);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleEdit(id) {
      this.$mRouter.push({
        route: "/pages/commodity/releasecommodities",
        query: { id: id },
      });
    },
    //确认按钮执行的操作
    conrfim() {
      if (this.level !== "3") {
        this.editCommodities();
      } else {
        this.deleteproduct();
      }
      this.hideSpec();
    },
    //商品分类的操作
    handleShopCard(index, status) {
      this.currentIndex = index;
      this.status = status;
      this.getProductList(this.productId);
    },
    hideSpec() {
      this.specClass = "hide";
      setTimeout(() => {
        this.specClass = "none";
      }, 250);
    },
    // 跳转至商品列表
    navTo(route) {
      this.$mRouter.push({ route });
    },
    // 数据初始化
    async initData() {
      await this.getProductCate("", "1");
    },
    // 获取商品分类列表
    async getProductCate(type, level) {
      await this.$http
        .get(`${category}`, { level: level })
        .then(async (res) => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          this.firstList = res.data;
          this.productId = res.data[0].id;
          await this.getProductList(this.productId);
          this.loading = false;
        })
        .catch(() => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          this.loading = false;
        });
    },
    // 分类切换显示
    showCategory(index, item) {
      this.showCategoryIndex = index;
      this.productId = item.id;
      this.getProductList(item.id);
    },
    // 获取产品列表
    async getProductList(id) {
      const params = {};
      params.page = this.page;
      await this.$http
        .get(`${product_category}/${id}`, { status: this.status })
        .then(async (res) => {
          if (res.data) {
            this.categoryProductList = res.data.data;
          } else {
            this.categoryProductList = [];
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background-color: $color-white;
}
.rf-category {
  background-color: $color-white;
  border-top: 1upx solid #eeeeee;
  /*  #ifdef  APP-PLUS  */
  //   margin-top: calc(20upx + var(--status-bar-height));
  /*  #endif  */
  /*模块分类*/
  .category-list {
    width: 100%;
    background-color: #fff;
    display: flex;
    .left,
    .right {
      position: absolute;
      top: 1upx;
      /*  #ifdef  APP-PLUS  */
      //   top: calc(80upx + var(--status-bar-height));
      /*  #endif  */
      bottom: 100upx;
    }
    .footer-btn {
      position: fixed;
      bottom: 0px;
      padding: 10upx 0;
      width: 100%;
      margin: 0 auto;
      .add-btn {
        background: #f91c1c;
        border-radius: 40upx;
        font-size: 30upx;
        font-family: PingFang SC;
        font-weight: 500;
        width: 690upx;
        color: #ffffff;
      }
    }
    .left {
      width: 220upx;
      left: 0upx;
      right: 0;
      background-color: #eeeeee;
      .row {
        width: 100%;
        height: 90upx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28upx;
        font-weight: 500;
        color: #999999;
        &.on {
          height: 100upx;
          background-color: #fff;
          font-weight: 500;
          color: #333333;
          font-size: 28upx;
          color: #2d2d2d;
        }
      }
    }
    .right {
      width: 530upx;
      right: 0;
      background-color: #fff;
      overflow: hidden;
      .container {
        height: 85%;
        width: 100%;
      }
      .tab-bar-list {
        height: 104upx;
        border-bottom: 1upx solid #eeeeee;
        line-height: 91upx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        .tab-bar-list-item {
          font-size: 28upx;
          color: #333;
          font-weight: 500;
          &.active {
            font-size: 30upx;
            color: #326130;
            font-weight: bold;
          }
        }
      }
      .second-category {
        z-index: 10;
        white-space: nowrap;
        width: 100%;
        margin: $spacing-sm $spacing-sm $spacing-base;
        .second-category-tag {
          margin-right: $spacing-base;
          padding: 5upx $spacing-lg;
          display: inline-block;
          border-radius: 8upx;
          font-size: $font-sm + 2upx;
        }
        .second-category-normal {
          color: $font-color-dark;
          border: none;
          background-color: $page-color-light;
        }
      }
      .category {
        width: 100%;
        bottom: 98upx;
        top: 4px;
        position: relative;
        overflow: hidden;
        .list {
          overflow-y: auto;
          .box {
            width: 100%;
            box-sizing: border-box;
            height: 263upx;
            border-bottom: 2upx solid #eeeeee;
            .shop-cart {
              height: 150upx;
              padding-top: 24upx;
              padding-left: 27upx;
              display: flex;
              justify-content: flex-start;
              .shop-image {
                width: 124upx;
                height: 124upx;
                margin-right: 20upx;
              }
              .shop-name {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .name {
                  font-size: 28upx;
                  font-weight: 500;
                  color: #333333;
                }
                .price {
                  font-size: 30upx;
                  font-family: DINPro;
                  font-weight: bold;
                  color: #f91c1c;
                }
              }
            }
            .shop-cart-edit {
              display: flex;
              justify-content: flex-end;
              align-items: center;
              margin-top: 30upx;
              .btn {
                width: 120upx;
                height: 46upx;
                line-height: 46upx;
                font-size: 24upx;
                font-family: PingFang SC;
                margin-right: 30upx;
                font-weight: 500;
                text-align: center;
                border: 1upx solid #333333;
                opacity: 1;
                border-radius: 26upx;
              }
            }
          }
        }
        .no-data {
          margin: 48upx 0;
          color: $font-color-light;
          display: flex;
          justify-content: center;
          align-items: center;

          .iconfont {
            margin-right: 20upx;
            font-size: $font-lg + 16upx;
          }
        }
      }
    }
  }
  .one-cover-category {
    margin-top: $spacing-base;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .box {
      width: calc(71.44vw / 3);
      margin-bottom: $spacing-lg;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      image {
        width: 64%;
        height: calc(71.44vw / 3 * 0.64);
      }
      .text {
        margin-top: 8upx;
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 26upx;
      }
      .category-tag {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: $spacing-sm;
        font-size: $font-sm + 2upx;
        margin-right: $spacing-base;
        color: $font-color-dark;
        background-color: $page-color-base;
        border-radius: 6upx;
      }
    }
  }
  .tui-product-container {
    flex: 1;
    margin-right: 10upx;
  }
  .tui-product-container:last-child {
    margin-right: 0;
  }
  .category-product-list {
    margin-bottom: 15upx;
    padding-bottom: 15upx;
    border-bottom: 1upx solid rgba(0, 0, 0, 0.08);
  }
  .category-product-list:last-child {
    border-bottom: none;
    background-color: #007aff;
  }
  .tui-pro-item {
    width: 100%;
    margin-bottom: 20upx;
    background: $color-white;
    box-sizing: border-box;
    border-radius: 12upx;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
  }
  .tui-flex-list {
    display: flex;
    margin-bottom: 1upx !important;
  }
  .tui-pro-img {
    width: 100%;
    display: block;
  }
  .tui-proimg-list {
    width: 160upx;
    height: 160upx !important;
    flex-shrink: 0;
    border-radius: 12upx;
  }
  .tui-pro-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20upx;
  }
  .tui-pro-tit {
    color: #2e2e2e;
    font-size: 26upx;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .tui-sale-price {
    font-size: 34upx;
    font-weight: 500;
  }
  .tui-factory-price {
    font-size: 24upx;
    color: #a0a0a0;
    text-decoration: line-through;
    padding-left: 12upx;
  }
  .tui-pro-pay {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24upx;
    color: #656565;
    .iconfont {
      font-size: $font-lg + 6upx;
      padding: 0 $spacing-sm;
    }
  }
  .popup .layers {
    position: fixed;
    z-index: 101;
    left: 60upx;
    top: 30%;
    width: 631upx;
    height: 346upx;
    border-radius: 10upx;
    background-color: #fff;
    .box-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32upx;
      font-weight: bold;
      height: 246upx;
    }
    .btn-wrapper {
      display: flex;
      justify-content: flex-start;
      border-top: 1upx solid #eeeeee;
      .btn {
        width: 50%;
        line-height: 100upx;
        text-align: center;
        font-size: 28upx;
        font-weight: 500;
      }
      .border-right {
        color: #326130;
        border-right: 1upx solid #eeeeee;
      }
    }
  }
  .shows {
    display: block;
  }
  .input-box {
    height: 60upx;
    position: relative;
    display: flex;
    align-items: center;
    margin: 10upx 20upx;
    .iconfont {
      width: 60upx;
      font-size: 48upx;
      font-weight: 500;
    }
    .iconsousuo2 {
      z-index: 999;
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      right: 0;
      width: 60upx;
      height: 60upx;
      font-size: 34upx;
      color: #c0c0c0;
    }
    input {
      flex: 1;
      height: 60upx;
      background-color: #f5f5f5;
      padding-left: 28upx;
      border-radius: 30upx;
      color: #888;
      font-size: 28upx;
    }
  }
}
</style>
